<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-touch-fullscreen" content="YES">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="css/reset.css">
</head>
<body>

<style>
    .spinner {
        margin: 100px auto 0;
        text-align: center;
        position: relative;
        top: 40vh;
    }

    .spinner > div {
        width: 45px;
        height: 45px;
        background-color: olivedrab;
        border-radius: 100%;
        display: inline-block;
        -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
        animation: bouncedelay 1.4s infinite ease-in-out;
        /* Prevent first frame from flickering when animation starts */
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }

    .spinner .bounce1 {
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
    }

    .spinner .bounce2 {
        -webkit-animation-delay: -0.16s;
        animation-delay: -0.16s;
    }

    @-webkit-keyframes bouncedelay {
        0%, 80%, 100% {
            -webkit-transform: scale(0.0)
        }
        40% {
            -webkit-transform: scale(1.0)
        }
    }

    @keyframes bouncedelay {
        0%, 80%, 100% {
            transform: scale(0.0);
            -webkit-transform: scale(0.0);
        }
        40% {
            transform: scale(1.0);
            -webkit-transform: scale(1.0);
        }
    }

    .zzc {
        width: 100%;
        height: 100%;
        background-color: #000000;
        opacity: 0.7;
        position: absolute;
        top: 0px;
        left: 0px;
        margin: 0;
        padding: 0;
        z-index: 9999;
    }
</style>

<img src="img/test1.jpeg">

<div class="zzc" id="zzc">
    <div class="spinner">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
    </div>
</div>
<input type="checkbox" id="ddd" onclick="cli('ds')">全选<br>

<input type="checkbox" class="ds">
<input type="checkbox" class="ds">
<input type="checkbox" class="ds">
<select>
    <option value="1111">111111</option>
    <option value="1111">222</option>
    <option value="1111" selected="selected">3333</option>
    <option value="1111">4444</option>
    <option value="1111">5555</option>
    <option value="1111">66666</option>
    <option value="1111">77777</option>
    <option value="1111">88888</option>

</select>
<iframe name="frames" id="frames" width="100%" height="100px">您的浏览器不支持框架</iframe>

<!--
<canvas id="myCanvas" style="width: 400px;height: 200px; border: 1px solid red;"
        onmousemove="cnvs_getCoordinates(event)"
        onmouseout="cnvs_clearCoordinates()"></canvas>
<div id="xycoordinates"></div>-->

<canvas id="myCanvas" width="400" height="300" style="border:1px solid #c3c3c3;">
    您的浏览器不支持该功能！
</canvas>
<input type="tel" id="istel" value="010-123456"><input type="button" onclick="checkTel()" value="aaaaaa">

<div style="width: 1px;height: 1500px;"></div>
<div id="gotop"
     style="width: 100px;height: 100px; background-color: #FF0000; position:fixed;top: 50%;right: 0px;"><a
        href="#asdasd">回到顶部回到顶部回到顶部回到顶部</a></div>

<script src="http://cdn.bootcss.com/zepto/1.1.6/zepto.min.js"></script>
<script src="modules/jquery.js"></script>
<script src="mymodel/WebViewJavascriptBridge.js"></script>
<script src="mymodel/JsBridge.js"></script>
<script src="mymodel/myTools.js"></script>
<!--<script src="http//cdn.bootcss.com/bootstrap/4.0.0-alpha.2?js/bootstrap.min.js&js/umd/alert.js"></script>-->

<script type="text/javascript">
    function test_callback(pra, callback) {
        if (pra) {
            callback('真的');
        } else {
            callback('假的');
        }
    }

    test_callback(false, function (r) {
        //alert(r); //回调测试
    })

    console.log(typeof null);

    /* console.log(typeof null);
     console.log(document.all);
     console.log('循环开始');
     isbreak:
     for (var c = 0; c < 3; c++) {
     for (var i = 0; i < 5; i++) {
     if (i == 3 && c == 2) {
     break isbreak;
     }
     console.log(i);

     }
     }
     console.log('循环结束');*/

    function Person(name, age) {
        this.name = name;
        this.age = age;
        console.log(name + age);
    }
    Person.prototype = {
        constructor: Person,
        sayName: function () {
            console.log(this.name);
        }
    }

    var person1 = new Person("Alex", 29);
    var person2 = new Person("Xiaoming", 28);

    person1.sayName();//"Alex";
    person2.sayName();//"Xiaoming"

    Person();

    function checkTel() {
        var isPhone = /\^/;
        var value = document.getElementById("istel").value.trim();
        if (isPhone.test(value)) {
            alert('是的');
        }
        else {
            alert('不是');
        }
    }

    console.log('parseInt:' + parseInt('3.1415926') + ',Number:' + Number('3.1415926'));

    /*
     var c = document.getElementById("myCanvas");
     var cxt = c.getContext("2d");
     cxt.fillStyle = "#FF0000";
     cxt.beginPath();
     cxt.arc(70, 18, 15, 0, Math.PI * 2, true);
     cxt.closePath();
     cxt.fill();
     */
    /*var c=document.getElementById("myCanvas");
     var cxt=c.getContext("2d");
     cxt.moveTo(10,10);
     cxt.lineTo(10,50);
     cxt.lineTo(150,50);
     cxt.lineTo(150,150);
     cxt.lineTo(10,50);
     cxt.lineTo(50,150);
     cxt.stroke();

     cxt.fillStyle="#FF0000";
     cxt.beginPath();
     cxt.arc(70,18,15,0,Math.PI*2,true);
     cxt.closePath();
     cxt.fill();*/

    /*window.addEventListener('load', function f1() {
     alert(1);
     });
     window.addEventListener('load', function f2() {
     alert(2);
     });
     window.addEventListener('load', function f3() {
     alert(3);
     });*/

    var mc = document.getElementById('myCanvas');
    var mcc = mc.getContext('2d');

    /*    //使用canvas绘制字

     mcc.font = '90px 黑体';
     mcc.fillStyle = '#036';
     mcc.textAlign = 'center';
     mcc.fillText('囧', 100, 120, 300);//绘制的字，x坐标，y坐标，应该是Z坐标*/


    /*//绘制矩形边框
     mcc.strokeStyle='#000';
     mcc.lineWidth='1';
     mcc.strokeRect(50,50,150,150);
     //填充矩形形状
     mcc.fillStyle='#f90';
     mcc.fillRect(50,50,150,150);
     mcc.fillStyle='red';
     mcc.fillRect(60,60,100,50);*/

    //创建绘图路径
    /*mcc.beginPath();//创建新路径
     mcc.arc(100, 120, 70, 0, Math.PI * 2, true);//圆形路径
     mcc.rect(100, 100, 100, 100);//用路径制作矩形
     mcc.closePath();//闭合路径
     //设置样式
     mcc.strokeStyle = 'red';//边框颜色
     mcc.lineWidth = 0;//填充宽度
     mcc.fillStyle = 'red';//填充颜色
     //设置矩形形状
     mcc.stroke();
     mcc.fill();*/

    mcc.beginPath();
    mcc.arc(150, 100, 50, 0, Math.PI * 2, true);
    mcc.fillStyle = '';


    console.log(Math.PI);//π

    function goto(url) {
        document.getElementById('frames').setAttribute('src', url);
    }

    function cnvs_getCoordinates(e) {
        x = e.clientX;
        y = e.clientY;
        document.getElementById("xycoordinates").innerHTML = "Coordinates: (" + x + "," + y + ")";
    }

    function cnvs_clearCoordinates() {
        document.getElementById("xycoordinates").innerHTML = "";
    }

    $(function () {

        //document.write('aaaaaaaaaaaaaaaaaaaaaa');

        //setTimeout('goto("http://www.qq.com")',500);
        //setTimeout('goto("http://www.haha.mx")', 2000);

        /*       function msg(sName, iSex, iAge) {
         var tempmsg = new Object;
         tempmsg.name = sName;
         tempmsg.sex = iSex;
         tempmsg.age = iAge;
         tempmsg.showAge = function () {
         document.write("年龄：" + this.age + "<br/>");
         //return "年龄：" + this.age + "<br/>";
         };
         return tempmsg;
         }

         var pos = msg('what', '男', '21');
         pos.showAge();*/


    })
    function cli(Obj) {
        var collid = document.getElementById("ddd");
        var coll = document.getElementsByClassName(Obj);
        if (collid.checked) {
            for (var i = 0; i < coll.length; i++)
                coll[i].checked = true;
        } else {
            for (var i = 0; i < coll.length; i++)
                coll[i].checked = false;
        }
    }
    //importScripts()
</script>
</body>

</html>